<template>
  <s-form-item :id="id" v-bind="attrs" label-class="dragItem">
    <component
      :is="all[type]"
      v-model="form[properties.key]"
      v-bind="extendAttrs"
      :disabled="properties.disabled == '1'"
    />
  </s-form-item>
</template>
<script>
import SSelect from '@/components/extends/select/index.vue'
import SInput from '@/components/extends/input/index.vue'
import SInputNumber from '@/components/extends/inputNumber/index.vue'
import SSelectTree from '@/components/extends/selectTree/index.vue'
import SDatePicker from '@/components/extends/datePicker/index.vue'
import SImg from '@/components/extends/img/index.vue'
import SFile from '@/components/extends/file/index.vue'
import SSwitch from '@/components/extends/switch/index.vue'
import SCheckBox from '@/components/extends/checkbox/index.vue'
import SRadio from '@/components/extends/radio/index.vue'
import STextArea from '@/components/extends/textarea/index.vue'
import SProvince from '@/components/extends/province/index.vue'
import SCascader from '@/components/extends/cascader/index.vue'
import SRate from '@/components/extends/rate/index.vue'
import BaseDragItem from './BaseDragItem.js'
import SSlider from '@/components/extends/slider/index.vue'
import STag from '@/components/extends/tag/index.vue'
import STree from '@/components/extends/tree/index.vue'
import STransfer from '@/components/extends/transfer/index.vue'
import SColorPicker from '@/components/extends/colorPicker/index.vue'
import { shallowRef } from 'vue'
import SIconSelect from '@/components/extends/iconselect/index.vue'
export default {
  name: 'DragFormItem',
  extends: BaseDragItem,

  data() {
    return {
      all: {
        select: shallowRef(SSelect),
        input: shallowRef(SInput),
        radio: shallowRef(SRadio),
        checkbox: shallowRef(SCheckBox),
        inputNumber: shallowRef(SInputNumber),
        switch: shallowRef(SSwitch),
        selectTree: shallowRef(SSelectTree),
        datetime: shallowRef(SDatePicker),
        img: shallowRef(SImg),
        file: shallowRef(SFile),
        textarea: shallowRef(STextArea),
        province: shallowRef(SProvince),
        cascader: shallowRef(SCascader),
        iconSelect: shallowRef(SIconSelect),
        rate: shallowRef(SRate),
        slider: shallowRef(SSlider),
        tag: shallowRef(STag),
        transfer: shallowRef(STransfer),
        tree: shallowRef(STree),
        colorPicker: shallowRef(SColorPicker)
      },
      tagNames: {
        select: 's-select',
        input: 's-input',
        radio: 's-radio',
        checkbox: 's-check-box',
        inputNumber: 's-input-number',
        switch: 's-switch',
        selectTree: 's-select-tree',
        datetime: 's-date-picker',
        img: 's-img',
        file: 's-file',
        textarea: 's-text-area',
        province: 's-province',
        cascader: 's-cascader',
        iconSelect: 's-icon-select',
        rate: 's-rate',
        slider: 's-slider',
        tag: 's-tag',
        transfer: 's-transfer',
        tree: 's-tree',
        colorPicker: 's-color-picker'
      }
    }
  },
  watch: {
    extendAttrs: {
      handler: function (val, oldVal) {
        this.$forceUpdate()
      },
      deep: true
    }
  },
  methods: {
    test() {},
    buildHtml(disabled, space, filter, modelName) {
      if (filter(this)) {
        return ''
      }
      let html = space + '<s-form-item\r\n'
      if (this.properties.ifCondition) {
        html = html + space + '  v-if="' + this.properties.ifCondition + '"\r\n'
      }

      html = html + this.buildHtmlAttr(disabled, this.attrs, space + '  ')
      html = html + space + '>\r\n'
      html = html + space + '  <' + this.tagNames[this.type] + '\r\n'
      html = html + this.buildHtmlAttr(disabled, this.extendAttrs, space + '    ')
      html =
        html +
        space +
        '    ' +
        'v-model="' +
        (modelName ? modelName : 'formValue') +
        '.' +
        this.properties.key +
        '"\r\n'
      if (disabled || this.properties.disabled == '1') {
        html = html + space + '    ' + 'disabled\r\n'
      }
      html = html + space + '    />\r\n' + space + '</s-form-item>'
      return html
    },
    getData(array, filter) {
      if (!filter(this)) {
        array.push({
          id: this.id,
          type: this.type,
          attrs: this.attrs,
          extendAttrs: this.extendAttrs,
          properties: this.properties
        })
      }
    },
    findQueryableItemHtml(obj, space) {
      if (this.properties.pageQuery == '2' || this.properties.pageQuery == '3') {
        let html = space + '<s-list-form-item\r\n'
        html = html + space + '  label="' + this.properties.label + '" size="small"\r\n'
        html = html + space + '>\r\n'
        html = html + space + '    <' + this.tagNames[this.type] + '\r\n'
        html = html + this.buildHtmlAttr(false, this.extendAttrs, space + '      ')
        html = html + space + '      ' + 'v-model="query.' + this.properties.key + '"\r\n'
        html = html + space + '    />\r\n' + space + '</s-list-form-item>'
        if (this.properties.pageQuery == '2') {
          obj.less.push(html)
        } else {
          obj.more.push(html)
        }
      }
      return obj
    }
  }
}
</script>
